<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {WalletFilled} from "@element-plus/icons-vue";
// import {User} from "@element-plus/icons-vue";
const hoveredItem1 = ref(false)
const hoveredItem2 = ref(false)
const sc_height = ref('690px')
const router = useRouter()
//退出登录
const logout =()=> {
    localStorage.removeItem('token');
  router.push({
    path:'/login'
  })
}

function toOrderDeliverView() {
  router.push({
    path: '/supplier/order4Deliver'
  })
}
function toOrderCompletedView() {
  router.push({
    path: '/supplier/order4Completed'
  })
}
import {useUserInfoStore} from '@/store/user.js'
import {userInfoGetService} from "@/api/user";
const userInfoStore = useUserInfoStore();
//获取个人信息
const getUserInfo = async () => {
    let result = await userInfoGetService();
    //存储pinia
    userInfoStore.info =result.data;
}
getUserInfo()//调用获取信息的方法
window.onresize = function () {
  console.log(window.innerHeight);
  sc_height.value = (window.innerHeight - 55) + 'px'
}
</script>
<template>
  <el-container style="min-height: 100vh; border: none">
    <!-- 侧边栏 -->
    <div class="aside">
      <el-aside style="width: 250px;">
        <el-menu
            active-text-color="Gold"
            :default-openeds="['1']"
            style="height: 100vh; width: 250px; overflow-x: hidden;  border: 0;"
            background-color=" rgba(184,40,118,0.58)"
            text-color="white"
        >
          <div>
            <img
                style="display:block;margin-left: 90px; margin-top: 10px; border-radius: 30px"
                width="60px"
                height="60px"
                :src="userInfoStore.info.savatar ? userInfoStore.info.savatar : require('@/assets/defaultAvatar.jpg')"
            />
          </div>
          <div>
              <router-link to="/supplier/dataAnalysis" style="text-decoration: none">
                  <el-menu-item index="1">
                      <el-icon>
                          <house/>
                      </el-icon>
                      <template v-slot:title>
                          <span>数据中心</span>
                      </template>
                  </el-menu-item>
              </router-link>
            <router-link to="/supplier/goodsManagement" style="text-decoration: none">
              <el-menu-item index="2">
                <el-icon>
                  <Menu/>
                </el-icon>
                <template v-slot:title>
                  <span>商品管理</span>
                </template>
              </el-menu-item></router-link>
            <el-sub-menu index="3">
              <template v-slot:title>
                <i class="el-icon-setting" id="iconClass"></i>
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="3.1" @click="toOrderDeliverView()">
                <el-icon>
                  <ShoppingCart/>
                </el-icon>
                <span>订单发货</span>
              </el-menu-item>
              <el-menu-item index="3.2" @click="toOrderCompletedView()">
                <el-icon>
                  <Van/>
                </el-icon>
                <span>订单完成</span>
              </el-menu-item>
            </el-sub-menu>
            <router-link to="/supplier/walletManagement" style="text-decoration: none">
              <el-menu-item index="4">
                <el-icon>
                  <WalletFilled/>
                </el-icon>
                <template v-slot:title>
                  <span>财务管理</span>
                </template>
              </el-menu-item>
            </router-link>

            <router-link to="/supplier/basicInfo" style="text-decoration: none">
              <el-menu-item index="5">
                <el-icon>
                  <Tools/>
                </el-icon>
                <template v-slot:title>
                  <span>个人中心</span>
                </template>
              </el-menu-item>
            </router-link>
          </div>
        </el-menu>
      </el-aside>
    </div>
    <el-container>
      <el-header
          style="
              box-shadow: 2px 2px 2px 2px rgba(255, 255, 255, 0.7);
              font-size: 2vh;
              border-bottom: 1px solid #ccc;
              line-height: 50px;
              height: 50px;
              display: flex;
              background-color: #ffffff;
              opacity: 0.8 ;
            "
      >
        <el-container>
          <div class="identify_box">
            <el-icon style="vertical-align: middle">
              <UserFilled/>
            </el-icon>
            供应商：<strong>{{userInfoStore.info.snickname}}</strong>
          </div>
          <div style="width: 200px; text-align:center; color: #f10180; font-size: 4.5vh; font-family: STKaiti;font-weight: bold">
            智链商控
          </div>
          <el-dropdown class="dropbox" @command="handleCommand">
                                <span class="el-dropdown_box">
                                    <el-avatar
                                            :src="userInfoStore.info.savatar ? userInfoStore.info.savatar : require('@/assets/defaultAvatar.jpg')"
                                        style="width: 45px; height: 45px; margin-right: 20px"/>
                                    <el-icon>
                                        <ArrowDownBold/>
                                    </el-icon>
                                </span>
            <template #dropdown>
              <el-dropdown-menu>
                <router-link to="/supplier/basicInfo" style="text-decoration: none">
                  <el-dropdown-item
                      :style="{ 'background-color': hoveredItem1 ? 'pink' : '','color':hoveredItem1?'white':'' }"
                      @mouseenter="hoveredItem1 = true" @mouseleave="hoveredItem1 = false"
                      command="info">
                    <el-icon>
                      <User/>
                    </el-icon>
                    <span class="dropbox_font">基本资料</span>
                  </el-dropdown-item>
                </router-link>
                <el-dropdown-item command="logout"
                                  :style="{ 'background-color': hoveredItem2? 'pink' : '','color':hoveredItem2?'white':'' }"
                                  @mouseenter="hoveredItem2 = true" @mouseleave="hoveredItem2 = false"
                                  @click="logout()">
                  <el-icon>
                    <SwitchButton/>
                  </el-icon>
                  <span class="dropbox_font">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-container>
      </el-header>
      <!--中间区域-->
      <el-main style="padding: 0 !important;">
        <el-scrollbar :height="sc_height">
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import {
  House,
  Menu,
  User,
  Tools,
  ShoppingCart,
  Van,
  ArrowDownBold, SwitchButton, WalletFilled, UserFilled
} from "@element-plus/icons-vue";

export default {
  name: "SupplierLayoutView",
  components: {
    ShoppingCart,
    Van,
    ArrowDownBold, House, Menu, User, Tools, SwitchButton, UserFilled
  }
}
</script>


<style scoped>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 2.5vh;
}

body {
  height: 100%;
}

/*身份的盒子*/
.identify_box {
  width: 300px;
}

.dropbox {
  display: flex;
  margin-left: 40%;
}

.el-dropdown_box {
  display: flex;
  align-items: center;
}

#iconClass {
  color: wheat;
}

.el-dropdown {
  /*--el-dropdown-menu-box-shadow: var(--el-box-shadow-light);*/
  --el-dropdown-menuItem-hover-fill: pink;
  --el-dropdown-menuItem-hover-color: pink;

}

html,
body,
#app,
.el-container {
  height: 100%;
}

.el-aside {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

/*下拉框字体*/
.dropbox_font {
  font-size: 11px;
}

</style>
